<template>
  <div class="cart">
    <div class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft">
        <template #right>
          <div
            class="iconfont iconEdit icon-bianji"
            @click="isEdit = !isEdit"
            v-if="cartList.length"
          ></div>
        </template>
      </van-nav-bar>
    </div>
    <div class="notLogin" v-if="!login">
      <span class="toLogin">还未登录？<b @click="toLogin">去登录</b></span>
    </div>
    <div class="Logged" v-else>
      <div class="nullCart" v-if="!cartList.length">
        <div class="icon iconfont icon-gouwuchetianjia" @click="toHome"></div>
        <span>购物车还是空的</span><br />
        <span>快去逛逛吧~</span>
      </div>

      <div class="gartlist" v-else>
        <div
          class="gartListItem"
          v-for="(item, index) in cartList"
          :key="index"
        >
          <div class="isdel">
            <span
              :class="
                item.selected
                  ? 'icon-xuanzhonggou'
                  : 'icon-danxuanweixuanzhong1'
              "
              class="iconfont"
              @click="toggleSigleCartGoods(item.id)"
            ></span>
          </div>
          <div class="itemImg" @click="toDetails(item.id)">
            <van-image :src="item.photo" />
          </div>
          <div class="content">
            <div class="itemtext">
              <span class="ellipsis-2">{{ item.title }}</span>
            </div>
            <div class="bot">
              <div class="price">
                <span>￥ {{ item.price }}</span>
              </div>
              <div class="num">
                <span @click="reduce(item.goods_nums, item.id)">-</span>
                <span>{{ item.goods_nums }}</span>
                <span @click="add(item.goods_nums, item.nums, item.id)">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" v-if="cartList.length">
      <!-- <div
        class="selectAll"
        :class="isAllDel ? 'icon-xuanzhong' : 'icon-xuanzhong'"
      ></div>
      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
    </div> -->
      <div class="selectAll">
        <span
          v-if="isEdit"
          class="icon-shanchu iconfont"
          @click="delCartGoods"
        ></span>
        <span @click="toggleAllGoodsSelect(!isAllSecect)">
          {{ !isAllSecect ? "全选" : "取消全选" }}
        </span>

        <span
          :class="isAllSecect ? 'icon-xuanzhong' : 'icon-danxuanweixuanzhong1'"
          class="iconfont icoSelect"
          @click="toggleAllGoodsSelect(!isAllSecect)"
        ></span>
      </div>
      <div class="totalPrice">
        <span
          >合计：<b>￥ {{ totalCart.toFixed(2) }}</b></span
        >
      </div>
      <div class="submit">
        <span>提交订单</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import { Toast, Dialog } from "vant";
export default {
  name: "cate",
  computed: {
    ...mapState(["cartList", "user"]),
    ...mapGetters(["login", "isAllSecect", "totalCart"]),
  },
  created() {
    this.$store.state.cartList = [];
    this.init();
  },
  data() {
    return {
      page: 1,
      size: 5,
      totalPrice: 339.0,
      isEdit: false,
    };
  },

  methods: {
    ...mapActions([
      "initCart",
      "toggleSigleCartGoods",
      "toggleAllGoodsSelect",
      "reqGoodsNumsAdd",
      "reqGoodsNumsReduce",
      "delectCartGoods",
    ]),

    init() {
      if (this.login) {
        const { page, size } = this;
        this.initCart({ page, size });
      }
    },
    add(goods_nums, nums, id) {
      if (goods_nums >= nums) {
        Toast.fail("商品数量达到上限");
        return;
      }
      this.reqGoodsNumsAdd(id);
    },
    reduce(goods_nums, id) {
      if (goods_nums <= 1) {
        Toast.fail("商品数量需大于0");
        return;
      }
      this.reqGoodsNumsReduce(id);
    },
    //删除购物车商品
    delCartGoods() {
      const len_dellist = this.cartList.filter((item) => item.selected).length;
      console.log(len_dellist);
      if (!len_dellist) {
        return;
      }
      Dialog.confirm({
        title: "温馨提示",
        message: `您确定要删除以下${len_dellist}件商品吗？`,
      })
        .then(() => {
          const list_str = this.cartList
            .filter((item) => item.selected)
            .map((item) => item.id)
            .join(",");
          // console.log(list_str);
          this.delectCartGoods(list_str);
        })
        .catch(() => {});
    },
    onClickLeft() {
      this.$router.back();
    },
    toHome() {
      this.$router.push("/");
    },
    toLogin() {
      this.$router.push("/login");
    },
    onSubmit() {
      console.log(123);
    },
    //详情页
    toDetails(id) {
      // console.log(id);
      this.$router.push(`/details/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.cart {
  padding-bottom: 100px;
  box-sizing: border-box;
  .header {
    .iconEdit {
      font-size: 47px;
      margin-left: 20px;
      color: #fff;
      flex-wrap: 900;
    }
  }
  .van-nav-bar {
    background-color: #08dbdb;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
  /deep/.van-icon {
    color: #fff;
  }
  .notLogin {
    height: calc(100vh - 190px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .toLogin {
      color: #666;
      font-size: 30px;
      b {
        font-weight: normal;
        color: blue;
        font-size: 30px;
      }
    }
  }
  .Logged {
    height: calc(100vh - 190px);
    .nullCart {
      width: 100%;
      height: 100%;
      text-align: center;
      // background-color: #814f4f;
      color: #666;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon {
        font-size: 100px;
        margin-bottom: 20px;
      }
      span {
        font-size: 33px;
        line-height: 33px;
      }
    }
    .gartlist {
      padding: 27px 20px 174px 35px;
      .gartListItem {
        width: 100%;
        margin-bottom: 22px;
        background-color: #fff;

        height: 215px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .isdel {
          width: 43px;
          height: 215px;
          // background-color: #666;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 43px;
            color: #08dbdb;
          }
        }
        .itemImg {
          width: 178px;
          height: 185px;
          margin-top: 20px;
          margin-bottom: 10px;
          // background-color: #f70;
          .van-image__img {
            width: 100%;
            height: 100%;
          }
        }
        .itemtext {
          width: 450px;
          height: 115px;
          // background-color: #c90;
          margin-top: 23px;
          span {
            line-height: 42px;
            font-size: 33px;
          }
        }
        .bot {
          height: 48px;
          width: 450px;
          // background-color: #f38;
          display: flex;
          justify-content: space-between;
          .price {
            font-size: 33px;
            text-align: center;

            span {
              line-height: 48px;
              color: red;
              font-weight: 700;
            }
          }
          .num {
            width: 210px;
            height: 48px;
            display: flex;
            justify-content: space-between;
            // background-color: #fff;
            span {
              height: 46px;
              width: 70px;
              font-size: 33px;
              border: #666 solid 1px;
              text-align: center;
              line-height: 48px;
            }
          }
        }
      }
    }
  }
  .footer {
    height: 112px;
    width: 100%;
    position: fixed;
    bottom: 90px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    align-items: center;
    .selectAll {
      width: 203px;
      height: 100%;
      text-align: center;
      line-height: 112px;
      font-weight: 700;
      font-size: 25px;
      color: #666;
      span {
        margin-left: 10px;
      }
      .icon-xuanzhong {
        color: #08dbdb;
      }
    }
    .totalPrice {
      font-size: 28px;
      margin-left: 40px;
      span {
        font-weight: 700;
        color: #666;
        font-size: 25px;
        b {
          color: red;
          font-weight: 700;
          font-size: 32px;
        }
      }
    }
    .submit {
      width: 232px;
      height: 100%;
      line-height: 112px;
      background-color: #08dbdb;
      font-size: 32px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
